<template>
  <div class="link-setting">
    <el-scrollbar class="side-scroll-bar">
      <el-tabs
        v-model="firstTab"
        type="card"
        class="no-bottom-margin indent-left-margin"
        @tab-click="handleClick"
      >
        <el-tab-pane name="style">
          <span slot="label"><svg-icon icon-class="zujian" />外观</span>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="样式" name="2">
              <div class="form-item">
                <div class="form-item-title"><span>边的宽度</span></div>
                <el-input-number
                  v-model="setting.lineWidth"
                  controls-position="right"
                  @change="settingChange('lineWidth')"
                ></el-input-number>
              </div>
              <div class="form-item">
                <div class="form-item-title"><span>边的颜色</span></div>
                <el-color-picker
                  v-model="setting.lineColor"
                  @change="settingChange('lineColor')"
                ></el-color-picker>
              </div>
            </el-collapse-item>
            <!-- <el-collapse-item title="位置和大小" name="1">
              
            </el-collapse-item>
            <el-collapse-item title="样式" name="2">
              
            </el-collapse-item>
            <el-collapse-item title="文字" name="3">
              
            </el-collapse-item>
            <el-collapse-item title="图片" name="4">
             
            </el-collapse-item> -->
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane name="data">
          <span slot="label"><svg-icon icon-class="moxingzujian" />数据</span>
          <div class="form-item">
            <div class="form-item-title"><span>ID</span></div>
            <el-input
              v-model="setting.id"
              :disabled="true"
              class="input-content"
            ></el-input>
            <el-collapse
              v-model="activeData"
              @change="handleChange1"
              style="width: 100%"
            >
              <el-collapse-item title="基本信息" name="3">
                <div class="form-item">
                  <div class="form-item-title"><span>线路名称</span></div>
                  <div class="form-item-titl">
                    {{ setting.ln[0] || "" }}
                  </div>
                </div>
                <div class="form-item">
                  <div class="form-item-title"><span>线路标识</span></div>
                  <div class="form-item-titl">
                    {{ setting.ldbm[0] || "" }}
                  </div>
                </div>
              </el-collapse-item>

              <el-collapse-item title="标签" name="1">
                <div class="form-item">
                  <el-tag
                    :key="tag"
                    v-for="tag in setting.dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput"
                    >+ New Tag</el-button
                  >
                </div>
              </el-collapse-item>

              <el-collapse-item title="线路信息" name="4">
                <div class="form-item">
                  <el-checkbox-group
                    style="display: flex; flex-wrap: wrap"
                    v-model="setting.ln"
                    @change="settingChange('lines')"
                  >
                    <el-checkbox
                      v-for="(item, index) in lineOptionsKey"
                      :key="index"
                      :label="item"
                    ></el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-collapse-item>

              <el-collapse-item name="2">
                <template slot="title">
                  数据<el-button
                    style="margin-left: 10px"
                    type="text"
                    icon="el-icon-plus"
                    @click.stop.prevent="addClick"
                  ></el-button>
                </template>
                <div class="form-item"></div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["currentSetting", "currentPen", "linesOptions"]),
    lineOptionsKey() {
      return Object.keys(this.linesOptions);
    },
  },
  watch: {
    "currentPen.id": {
      // 当切换节点数据时， 仅有id变化才会更新setting，
      // 其他情况 不通过store来更新data
      handler: function (val, oldval) {
        // this.setting = {
        //   ...this.currentSetting,
        // };
        if (this.currentPen && this.currentPen.isEdge()) {
          this.updateStoreLink(this.currentPen);
        }
      },
      deep: true,
    },
  },
  mounted() {},
  data() {
    return {
      firstTab: "style",
      activeNames: ["2"],
      activeData: ["1", "2", "3", "4"],
      setting: {
        x: "", // 位置不需要
        y: "", // 位置不需要
        h: "", // 大小不需要
        w: "", // 大小不需要
        lineWidth: 1, // 需要
        lineColor: "", // 需要
        bkcolor: "", // 需要
        fontsize: 12, // 文字不需要
        fontcolor: "", // 文字不需要
        textdx: 0, // 文字不需要
        textdy: 0, // 文字不需要
        text: "", // 文字不需要
        kId: "", // 车站dbm， 不需要
        id: "", // id，需要
        dynamicTags: [], // 标签， 需要
        ln: [], // 线路名称， 需要
        ldbm: [], // 线路dbm， 需要
      },
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    ...mapMutations(["setData"]),
    settingChange(type) {
      switch (type) {
        case "lineWidth":
          this.currentPen.attr("line/strokeWidth", this.setting.lineWidth);
          break;
        case "lineColor":
          this.currentPen.attr("line/stroke", this.setting.lineColor);
          break;
        case "dynamicTags":
          this.currentPen.setData(
            {
              dynamicTags: this.setting.dynamicTags,
            },
            {
              deep: false,
            }
          );
          break;
        case "lines":
          this.currentPen.setData(
            {
              ln: this.setting.ln,
              ldbm: this.setting.ln.map((item) => this.linesOptions[item].dbm),
            },
            {
              deep: false,
            }
          );
          this.setting.ln &&
            this.setting.ln.length > 0 &&
            this.currentPen.attr(
              "line/stroke",
              this.linesOptions[this.setting.ln[0]].color
            );
          break;
      }
    },
    updateStoreLink(edge) {
      let attrs = edge.getAttrs();
      let { line } = attrs;
      let id = edge.id;
      let data = edge.getData();
      let dataTemp = {
        x: 0,
        y: 0,
        h: 0,
        w: 0,
        lineWidth: line.strokeWidth,
        lineColor: line.stroke,
        bkcolor: "#ffffff",
        fontsize: 12,
        fontcolor: "#ffffff",
        textdx: 0,
        textdy: 0,
        text: "",
        kId: "",
        id: id,
        dynamicTags: data.tags,
        ln: data.ln,
        ldbm: data.ldbm,
      };
      this.setting = {
        ...dataTemp,
      };
      this.setData({
        currentSetting: dataTemp,
      });
    },
    handleClick() {},
    handleChange(val) {
      console.log(val);
    },
    handleChange1() {},
    handleClose(tag) {
      this.setting.dynamicTags.splice(this.setting.dynamicTags.indexOf(tag), 1);
      this.settingChange("dynamicTags");
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.setting.dynamicTags.push(inputValue);
        this.settingChange("dynamicTags");
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    addClick() {},
  },
};
</script>
<style lang="scss" scoped>
.link-setting {
  width: 100%;
  height: 100%;
  :deep(.el-scrollbar__view) {
    width: 100%;
    height: 100%;
  }
  .form-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .form-item-title {
      width: 100px;
      text-align: left;
    }
  }
  .el-tag {
    margin-bottom: 10px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    margin-bottom: 10px;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    margin-bottom: 10px;
    vertical-align: bottom;
  }

  .input-content {
    width: 180px;
  }
}
</style>
